<template>
  <div class="video_list">
    <div class="video_content"
         v-for="item in videos"
         :key="item.video_id"
         @click="toVideoContent(item.video_id)"
    >
      <img :src="item.video_cover">
      <div class="sub_title">视频名称:{{ item.video_name }}</div>
      <div class="sub_title">创建者姓名:{{ item.username }}</div>
      <div class="sub_title">创建时间:{{ item.create_time }}</div>
      <div v-if="item.ispass == 0">
        <el-tag
            type="warning"
            effect="light"
            class="tag"
            round>
          未审核
        </el-tag>
      </div>
      <div v-else-if="item.ispass == 1">
        <el-tag
            type="success"
            effect="light"
            class="tag"
            round>
          已通过
        </el-tag>
      </div>
      <div v-else-if="item.ispass == 2">
        <el-tag
            type="error"
            effect="light"
            class="tag"
            round>
          未通过
          <el-popover
              placement="top-start"
              title="未通过原因"
              :width="200"
              trigger="hover"
              :content="item.unpass_reason"
          >
            <template #reference>
              <el-button class="m-2">?</el-button>
            </template>
          </el-popover>
        </el-tag>
      </div>
    </div>
  </div>
  <el-pagination class="page"
                 background layout=" pager, total"
                 :total="total"
                 :page-size="pageSize"
                 @change="handlePageChange"
  />
</template>

<script setup>
import {ref, onMounted, onUpdated, watchEffect, watch} from "vue";
import router from "@/router/index.js";

const page = ref(1);
const pageSize = ref(8);
const total = ref();
const videos = ref([{}])
let pageData = {
  page: '',
  pageSize: '',
}
onMounted(() => {
  pageData.page = page.value;
  pageData.pageSize = pageSize.value;
  emit('limitPage', pageData)
})
// 定义一个prop来接收courseBase.course_intro
const props = defineProps({
  data: Object
});
// 定义一个emits对象来声明要触发的事件
const emit = defineEmits(['limitPage']);
const toVideoContent = (id) => {
  router.push({name: 'VideoContent', params: {videoId: id}})
}
const handlePageChange = (curP, PSize) => {
  console.log(curP, PSize)
  page.value = curP;
  pageSize.value = PSize;
}
watchEffect(() => {
  if (props.data) {
    total.value = props.data.total
    videos.value = props.data.videos
  }
})
watch(page, (newpage) => {
  console.log("newpage", newpage);
  pageData.page = newpage;
  emit('limitPage', pageData);
})
</script>

<style scoped>
/**
grid-template-columns: repeat(5, 1fr);
这个属性用于定义网格容器的列结构。repeat(5, 1fr) 表示创建5列，
每列的宽度都是相等的，并且每列占据等量的可用空间（fractional unit，fr）。

repeat() 函数用于重复指定的列模板一定的次数。
5 是重复的次数，即创建5列。
1fr 是每次重复时使用的列宽度，fr 是一个相对单位，
代表网格容器中所有列宽度的等分。如果有5列，每列都是1fr，
那么它们将平分容器的总宽度。
 */
.video_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 20px auto;
  padding: 10px;
}

.video_content {
  position: relative; /* 添加相对定位 */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;

  width: 250px;
  height: 210px;
  margin: 15px 0;
  padding: 35px;
  border-radius: 20px;
  background: rgba(238, 249, 255, 0.7);
  transition: box-shadow, transform 0.5s ease;
}

.video_content img {
  margin-bottom: 10px;
  width: 250px;
  height: 200px;
  object-fit: cover;

  border-radius: 20px;
}

.video_content:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgb(215, 253, 219), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(127, 193, 255), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
}

.sub_title {
  margin: 3px 0;
}

.page {
  float: right;
  margin: 20px;
}

.tag {
  position: absolute;
  top: -1px;
  left: -1px;
}

.m-2 {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0);
}
</style>